<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Dashboard - Ace Admin</title>
<jsp:include page="/WEB-INF/jsp/common.jsp"></jsp:include>
<meta name="description" content="overview &amp; stats" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

</head>

<body class="no-skin">
	<!-- vue start-->
	<div id="app">
		<!-- 导航栏 start -->
		<div id="navbar" class="navbar navbar-default          ace-save-state">
		    <!-- 菜单栏  -->
			<div class="navbar-container ace-save-state" id="navbar-container">
				<!-- 菜单栏  左侧-->
				<div class="navbar-header pull-left">
					<a href="index.html" class="navbar-brand"> <small> <i
							class="fa fa-leaf"></i> Ace Admin
					</small>
					</a>
				</div>
				<!-- 菜单栏  右侧-->
				<div class="navbar-buttons navbar-header pull-right"
					role="navigation">
					<!-- 子菜单栏 -->
					<ul class="nav ace-nav">
						<li class="light-blue dropdown-modal"><a
							data-toggle="dropdown" href="#" class="dropdown-toggle"> <img
								class="nav-user-photo"
								src="${ctx}/assets/images/avatars/user.jpg" alt="Jason's Photo" />
								<span class="user-info"> <small>Welcome,</small> Jason
							</span> <i class="ace-icon fa fa-caret-down"></i>
						</a>
							<ul
								class="user-menu dropdown-menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
								<li><a href="#"> <i class="ace-icon fa fa-cog"></i>
										Settings
								</a></li>
								<li><a href="profile.html"> <i
										class="ace-icon fa fa-user"></i> Profile
								</a></li>
								<li class="divider"></li>
								<li><a href="/web/loginout"> <i
										class="ace-icon fa fa-power-off"></i> Logout
								</a>
								</li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- 导航栏 end -->
		<!-- 内容区  start 上(左右)下风格 -->
		<div class="main-container ace-save-state" id="main-container">
			<!-- 内容区  上 start 左侧 菜单栏 -->
			<div id="sidebar" class="sidebar responsive  ace-save-state">
				<div class="sidebar-shortcuts" id="sidebar-shortcuts">
					<div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
						<button class="btn btn-success">
							<i class="ace-icon fa fa-signal"></i>
						</button>
						<button class="btn btn-info">
							<i class="ace-icon fa fa-pencil"></i>
						</button>
						<button class="btn btn-warning">
							<i class="ace-icon fa fa-users"></i>
						</button>
						<button class="btn btn-danger">
							<i class="ace-icon fa fa-cogs"></i>
						</button>
					</div>
				</div>
				<ul class="nav nav-list">
					<li class="" v-for="item in items"><a href="#"
						class="dropdown-toggle"> <i class="menu-icon fa fa-list"></i>
							<span class="menu-text"> {{ item.name }} </span> <b
							class="arrow fa fa-angle-down"></b>
					</a> <b class="arrow"></b>
						<ul class="submenu">
							<li class="" v-for="sub in item.sub"><a
								@click="showAtRight(sub.url)"> <i
									class="menu-icon fa fa-caret-right"></i> {{ sub.name }}
							</a> <b class="arrow"></b></li>
						</ul></li>
				</ul>
			</div>
			<!-- 内容区  上 end 左侧 菜单栏 -->
			<!-- 内容区  上 start 右侧 内容-->
			<div class="main-content">
				<div class="main-content-inner">
					<!-- 内容区  右侧 内容 上 -->
					<div class="breadcrumbs ace-save-state" id="breadcrumbs">
						<ul class="breadcrumb">
							<li><i class="ace-icon fa fa-home home-icon"></i> <a
								href="#">{{message}}</a></li>

							<li v-if="menu"><a href="#">{{menu}}</a></li>
							<li class="active" v-if="submenu">{{submenu}}</li>
						</ul>
						<div class="nav-search" id="nav-search">
							<form class="form-search">
								<span class="input-icon"> <input type="text"
									placeholder="Search ..." class="nav-search-input"
									id="nav-search-input" autocomplete="off" /> <i
									class="ace-icon fa fa-search nav-search-icon"></i>
								</span>
							</form>
						</div>
					</div>
					<!-- 内容区  右侧  内容下-->
					<div class="page-content">
						<div class="page-header">
							<h1>
								Dashboard <small> <i
									class="ace-icon fa fa-angle-double-right"></i> overview &amp;
									stats
								</small>
							</h1>
						</div>
						<!-- /.page-header -->
						<div class="row">
							<div class="col-xs-12">
								<!-- PAGE CONTENT BEGINS -->
								后台管理系统
								<!-- PAGE CONTENT ENDS -->
							</div>
							<!-- /.col -->
						</div>
						<!-- /.row -->
					</div>
					<!-- /.page-content -->
				</div>
			</div>
			<!-- 内容区  上 end 右侧 内容-->
			<!-- 内容区  下  start-->
			<div class="footer">
				<div class="footer-inner">
					<div class="footer-content">
						<span class="bigger-120"> <span class="blue bolder">Ace</span>
							Application &copy; 2013-2014
						</span> &nbsp; &nbsp; <span class="action-buttons"> <a href="#">
								<i class="ace-icon fa fa-twitter-square light-blue bigger-150"></i>
						</a> <a href="#"> <i
								class="ace-icon fa fa-facebook-square text-primary bigger-150"></i>
						</a> <a href="#"> <i
								class="ace-icon fa fa-rss-square orange bigger-150"></i>
						</a>
						</span>
					</div>
				</div>
			</div>
			<!-- 内容区  下  end-->
		</div>
		<!-- 内容区  end 上(左右)下风格 -->
	</div>
	<!-- vue end-->
</body>
</html>
<script type="text/javascript">
	var vm = new Vue({
		el : '#app',
		data : {
			message : '首页',
			menu : '',
			submenu : '',
			items :''
			/* items : [ {
				name : '基本信息',
				sub : [ {
					name : '组件管理',
					url : '/web/com'
				}, {
					name : '分类管理',
					url : '/web/cate'
				}, {
					name : '接口管理',
					url : '/web/api'
				} ]
			}, {
				name : '测试管理',
				sub : [ {
					name : 'mock数据',
					url : '/web/mock'
				} ]
			} ] */
		},
		created:function(){
			var $this = this;
			$.ajax({
				type : "POST",
				url : ctx + "/web/getMenu",
				success : function(data) {
					$this.items = data;
				}
			});
		},
		// 在 `methods` 对象中定义方法
		methods : {
			showAtRight : function(url) {
				var $this = this;
				$.ajax({
					type : "POST",
					url : ctx + url,
					success : function(data) {
						$(".page-content").html(data);
					}
				});

				$.ajax({
					type : "POST",
					url : ctx + "/web/getInfo",
					data : {
						url : url
					},
					success : function(data) {
						$this.menu = data.menu;
						$this.submenu = data.menuname;
					}
				});
			}
		}
	})
</script>
